<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>书籍详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../libs/mui/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../libs/iconfont/fonts/iconfont.css"/>
		<style>
			/*图片*/
	   		.mui-table-view-cell>a:not(.mui-btn){ 
				 white-space:normal
			}
			.book.mui-table-view .mui-media-object {
				line-height: 80px;
				max-width:60px;
				height: 80px;
			}
			.book .mui-media-object{-webkit-box-shadow:0 5px 10px #858585;box-shadow: 0 5px 10px #858585;margin-right: 10px;}
			/*九宫格*/
			.mui-grid-view.mui-grid-9{background-color: #FFFFFF;border: none;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{border: none;padding:0;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell i{font-size: 30px !important;color:#272636 ;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{color:#929292;font-size: 12px;}
			/*简介*/
			.brief{background-color: #ffffff;padding: 15px;}
			.brief p{color:#333333;margin-top: 8px;}
			.brief .brief-all{display:none;}
			.brief .mui-text-center{display: none;}
			/*作者*/
			.autor{background-color: #ffffff;padding: 15px;}
			.autor p{color:#333333;margin-top: 8px;}
			.autor .autor-all{display:none;}
			.autor .mui-text-center{display: none;}
			/*评论*/
			.m5 .mui-table-view .mui-media-object.touxiang{border-radius: 100%; height: 40px !important; max-width:40px !important; line-height: 40px !important;}
			.m5 .mui-media-object{height: 60px !important; max-width: 60px !important; line-height: 60px !important;}
			.mui-table-view-cell p{font-size: 12px; }
			.words{color: #222222;padding: 8px 0;}
			/*底部*/
			.mui-tab-item>span{width: 100%;background: #ffffff;color: #139f13;display: inline-block;padding: 15px 0;text-align: center;}
			/*弹窗*/
			#topPopover {
				position: fixed;
				top: 50px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto !important;
				right: 6px;
			}
			.mui-popover{width: 50% !important;}
			.alert{position: fixed;bottom: 0;left: 0;right: 0;background-color: #fff;z-index: 999;display: none;}
			.alert .mui-table-view-cell:after {left: 0;}
			.alert .mui-table-view-cell>span{color: red;}
			.alert .mui-table-view-cell>button{background-color:#139f13;color: #fff;border: none;width: 80%;border-radius: 30px;margin: 8px 0;padding: 8px 12px;}
			.alert-back{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: #000000;opacity: .4;filter: alpha(opacity=40); z-index: 99;display: none;}
			/*余额不足支付*/
			.mui-radio input[type=radio]:checked:before {content: '\e442';color: #139f13;}
			.mui-radio input[type=radio]:before{font-size: 24px;}
			.mui-input-row label{padding: 0;vertical-align: middle;padding-left: 36px !important;display: inline;}
			.mui-radio input[type=radio]{top: -1px;left: 0 !important;right:0;}
			.mui-input-row input[type=text]{border:1px solid #aaa;padding: 0 !important;height: auto; width:50%;}
		</style>
	</head>
 
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				<span>详情</span>
			</a>
			<a class="mui-icon mui-pull-right" href="#topPopover">
				<h5 >分享</h5>
			</a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item add_bookself">
				<span class="jiaru">加入书架</span>
			</a>
			<a class="mui-tab-item free-read">
				<span class="read" style="background-color: #139f13;color: #fff;">免费试读</span>
			</a>
			<a class="mui-tab-item buy">
				<span>购买</span>
			</a>
		</nav>
		<div class="mui-content">
			<div>
				<ul class="mui-table-view book">
					<li class="mui-table-view-cell mui-media mui-text-center">
						<a>
							<img class="mui-media-object pic" src="../public/img/book.jpg">
							<div class="mui-media-body mui-text-left" style="display: inline-block;">
								<span class="book_name"></span>
								<p>
									<span class="author"></span> 
								</p>
								<p class="discount"><span class="mui-red">0.00</span>元</p>
								<span class="mui-h5">
									<i class="mui-icon iconfont" style="vertical-align: middle;font-size: 12px;">&#xe609;</i>
									<span class="numbers">0</span>
								</span>
							</div>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 collection">
		            	<a>
		                    <i class="mui-icon iconfont want-read">&#xe625;</i>
		                    <div class="mui-media-body">想读</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 add_comment">
		            	<a>
		                    <i class="mui-icon iconfont">&#xe61c;</i>
		                    <div class="mui-media-body">读过</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
		            	<a  class="gouwu">
		                    <i class="mui-icon iconfont">&#xe616;</i>
		                    <div class="mui-media-body">加入购物车</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 catalog">
		            	<a>
		                   	<i class="mui-icon iconfont">&#xe617;</i>
		                    <div class="mui-media-body">查看目录</div>
		            	</a>
		            </li>
		        </ul>
				<div class="brief m5">
					简介
					<p class="book_brief">
						<!--<span class="book_brief"></span>
						<span class="brief-all"></span>-->
					</p>
					<p class="mui-text-center">
						<i class="mui-icon iconfont pull" style="padding: 10px;">&#xe61a;</i>
					</p>
				</div>
				<div class="autor m5">
					作者
					<p class="author_brief">
						
					</p>
					<p class="mui-text-center">
						<i class="mui-icon iconfont pull1" style="padding: 10px;">&#xe61a;</i>
					</p>
				</div>
				<div class="m5">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							评价
						</li>
					</ul>
					<div class="comment_lists"></div>
					<!--<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>-->
					<ul class="mui-table-view see_all" style="margin-bottom: 1em;">
						<li class="mui-table-view-cell mui-text-center">
							<span class="gray">查看全部评论</span>
						</li>
					</ul>
				</div>
			</div>
			<div id="topPopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							<i class="mui-icon iconfont mui-blus">&#xe60f;</i>
							<span>Facebook</span>
						</li>
					</ul>
			</div>
			<!--购买-->
			<div class="alert buy">
				<div class="alert-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							购买确认
						</li>
						<li class="mui-table-view-cell">
							价格：<span class="total_price"></span>
						</li>
						<li class="mui-table-view-cell">
							余额：<span class="account_price"></span>
						</li>
						<li class="mui-table-view-cell">
							支付方式：<span class="back pay_type"></span>
						</li>
						<li class="mui-table-view-cell mui-text-center balance_pay">
							<button type="button">支付金额<span class="total_price">0.00<span>元</button>
						</li>
					</ul>
				</div>
			</div>
			<!--余额不足-->
			<div class="alert balance">
				<div class="alert-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							余额不足支付
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-input-row mui-radio mui-left">
								<label>使用注册手机支付</label>
								<input name="pay" value="Item 1" type="radio" checked>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-input-row mui-radio mui-left">
								<label>其他手机</label>
								<input name="pay" value="Item 2" type="radio">
								<input type="text" />
							</div>
						</li>
						<li class="mui-table-view-cell mui-text-center" style="margin-top: 43px;">
							<button type="button" class="sure-pay">确定支付</button>
						</li>
					</ul>
				</div>
			</div>
			<div class="alert-back"></div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/app/book-detail-needbuy.js" ></script>
		<script type="text/javascript" src="../js/app/bookself.js" ></script>
		<script type="text/javascript" src="../js/app/buy.js" ></script>
		<script type="text/javascript" src="../js/details.js" ></script>
		<script src="../js/open.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
//			$(".want-read").on("tap",function(){
//				$(this).addClass('mui-red')
//				$(this).html('&#xe628;')
//				mui.toast('已标记为想读')
//			})
//			$(".pull").on('tap',function(){
//				if($(".brief-all").is(':hidden')){
//					$(".brief-all").toggle()
//					$(this).html('&#xe619;')
//				}else{
//					$(".brief-all").toggle()
//					$(this).html('&#xe61a;')
//				}
//				
//			})
//			$(".pull1").on('click',function(){
//				if($(".autor-all").is(':hidden')){
//					$(".autor-all").toggle()
//					$(this).html('&#xe619;')
//				}else{
//					$(".autor-all").toggle()
//					$(this).html('&#xe61a;')
//				}
//				
//			})
//			$(".buy").on("tap",function(){
//				$(".alert.buy").slideToggle()
//				$(".alert-back").show()
//			})
			$(".alert-back").on("click",function(){
				$(".alert.buy").slideUp()
				$(".alert.balance").slideUp()
				$(this).toggle()
			})
//			$(".alert.buy button").on("click",function(){
//				$(".alert.buy").slideToggle()
//				$(".alert.balance").slideToggle()
//			})
//			$(".sure-pay").on("click",function(){
//				$(".alert.buy").slideUp()
//				$(".alert.balance").slideUp()
//				$(".alert-back").hide()
//				mui.toast("购买成功")
//				$(".buy").hide()
//			})
//			$(".jiaru").on("tap",function(){
//				mui.toast('已加入书架')
//			})
//			$(".gouwu").on("tap",function(){
//				mui.toast('已加入购物车')
//			})
			$(".download").on("tap",function(){
				mui.toast('数据连接中...')
			})
//			$(".free-read").on('tap',function(){
//				openNewPage('read-books.html')
//			})
		</script>
	</body>

</html> 